<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
  <div id="app">
    <h3>{{ mes }}</h3>
    <btn :val='"小明"'></btn>
    <btn :val='"小明"'></btn>
    <btns :val='"小王"' @cbtn="cli"></btns>
  </div>

  <script src="./js/vue.js"></script>
  <script>

    Vue.prototype.bus = new Vue()

    var app = new Vue({
      el: "#app",
      data: {
        mes: "hello Vue"
      },
      methods: {
        clickbtn() {
          alert('btn');
        },
        changs() {
         this.bus.$on('changs', function(res) {
            console.log(res);
          })
        },
        cli(res) {
          this.mes = res;
        }
      },
      components: {
        btn: {
          props: {
            val: {
              type: [String, Number],
              default: 0
            }
          },
          template: "<button @click='clickbtn'> {{val}} </button>",
          methods: {
            clickbtn() {
              console.log("发送成功!!!")
              this.bus.$emit('changs', this.val);
              this.$emit('cbtn', this.val);
            }
          },
        },
        btns: {
          props: {
            val: {
              type: [String, Number],
              default: 0
            }
          },
          template: "<button @click='clickbtn'> {{val}} </button>",
          mounted: function(){
            var _this = this
            this.bus.$on('changs', function(res) {
              console.log(this, _this);
              _this.val = res;
              console.log("接收成功!!!", res);
            })
          },
          methods: {
            clickbtn() {
              this.$emit('cbtn', this.val)
            }
          }
        }
      }
    })
  </script>
</body>
</html>